<template>
  <div class="hotWork-container">
    <el-button type="primary" :icon="VideoPlay">播放</el-button>
    <el-table style="width: 100%" :data="songList">
      <el-table-column type="index"></el-table-column>
      <el-table-column width="60px">
        <template v-slot="{ row }">
          <el-button :icon="VideoPlay" @click="playSong(row)"></el-button
        ></template>
      </el-table-column>
      <el-table-column label="歌曲名称" prop="name"></el-table-column>
      <el-table-column
        label="歌曲时长"
        prop="dt"
        width="80px"
      ></el-table-column>
      <el-table-column label="专辑名" prop="al.name"></el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts">
export default {
  name: "HotWork",
};
</script>

<script lang="ts" setup>
import { VideoPlay } from "@element-plus/icons-vue";
import { getArtistSongApi } from "@/api/artist/artist";
import { onMounted, ref } from "vue";
import { useRoute } from "vue-router";
import dayjs from "dayjs";
import { useSongPlaying } from "@/stores/songPlaying";

const useSongPlayingStore = useSongPlaying();

const route = useRoute();
const id = ref<any>(route.query.id);

const songList = ref([]);

//播放歌曲
const playSong = (row: any) => {
  useSongPlayingStore.getsongList(row.id);
};

const getArtistSong = async (id: number) => {
  const res = await getArtistSongApi(id);
  songList.value = res.hotSongs.map((item: any) => {
    item.dt = dayjs(item.dt).format("mm:ss");
    return item;
  });
};

onMounted(() => {
  getArtistSong(id.value);
});
</script>

<style scoped>
.hotWork-container {
  margin-top: 15px;
}
</style>
